<script setup>
import MissionEditor from "./MissionEditor/MissionEditor.vue";
import DatabaseViewer from "./DataBaseViewer/DatabaseViewer.vue";

</script>

<!-- 设置两个按钮，mission和database, -->
<!-- 点击之后分别弹出mission editor 和 database viewer 窗口 -->
<template>
  <div id="MainView">

    <el-row justify="center">
      <!-- mission editor -->
      <el-col :span="12">
        <div class="grid-content ep-bg-purple">
          <MissionEditor/>
        </div>
      </el-col>

      <!-- database viewer -->
      <el-col :span="12">
        <div class="grid-content ep-bg-purple-light">
          <DatabaseViewer/>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
